﻿
function AddMap(originalMapMarkerPosition, initialZoomFactor, originalMapMarkerDraggable, originalMapClickable, txtLatitudeSelector, txtLongitudeSelector) {

    var base = this;
    var mapArea;
    var mapAreaMarkerLayer;

    this.GetMarkerPopupMessage = function (mapMarkerPosition) {
        var popupMsg = "Latitude: " + mapMarkerPosition.lat.toFixed(4) + "<br />Longitude: " + mapMarkerPosition.lng.toFixed(4);
        return popupMsg;
    };

    this.SetCoordinateValueInExternalTextBoxes = function (txtLatSel, txtLonSel, mapMarkerPosition) {
        $(txtLatSel).val(mapMarkerPosition.lat.toFixed(4));
        $(txtLonSel).val(mapMarkerPosition.lng.toFixed(4));
    };

    this.MapMarker = function (mapMarkerPosition) {

        //define a map icon image
        var mapMarkerIcon = L.divIcon({ className: 'leaflet-marker-icon-2x' });
        var popupMsg = GetMarkerPopupMessage(mapMarkerPosition);

        //add properties to a map marker and create it
        var mapMarker = new L.Marker(mapMarkerPosition,
            {
                icon: mapMarkerIcon,
                draggable: mapMarkerDraggable
            });

        mapMarker.bindPopup(popupMsg);

        return mapMarker;
    };

    this.MapClick = function (e) {
        mapArea.removeLayer(mapAreaMarkerLayer);

        //update the form's textboxes
        base.SetCoordinateValueInExternalTextBoxes(txtLatitudeSelector, txtLongitudeSelector, e.latlng);

        mapAreaMarkerLayer = base.MapMarker(e.latlng);
        mapArea.addLayer(mapAreaMarkerLayer);
        mapAreaMarkerLayer.on('dragend', base.MarkerDrag);
    };

    this.MarkerDrag = function (e) {
        // Update the lat/long values of the form after a marker dragend event;
        var latitudeValue = e.target._latlng.lat.toFixed(6);
        var longitudeValue = e.target._latlng.lng.toFixed(6);

        //update the form's textboxes
        base.SetCoordinateValueInExternalTextBoxes(txtLatitudeSelector, txtLongitudeSelector, e.target._latlng);

        var popupMsg = GetMarkerPopupMessage(e.target._latlng);
        this.unbindPopup();
        this.bindPopup(popupMsg);
    };

    this.InitiateMap = function (mapMarkerPosition, zoomFactor, mapMarkerDraggable, mapClickable) {

        //define the map area
        mapArea = L.map('locationMap', {
            center: mapMarkerPosition,
            zoom: zoomFactor
        });

        //load map image from external source
        var mapTileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' });

        //add the map tile layer to map area
        mapArea.addLayer(mapTileLayer);

        mapAreaMarkerLayer = base.MapMarker({ "lat": mapMarkerPosition[0], "lng": mapMarkerPosition[1] });

        //place marker on the map
        mapArea.addLayer(mapAreaMarkerLayer);

        if (mapMarkerDraggable) {
            mapAreaMarkerLayer.on('dragend', base.MarkerDrag);
        }
        if (mapClickable) {
            mapArea.on('click', base.MapClick);
        }
    };

    base.InitiateMap(originalMapMarkerPosition, initialZoomFactor, originalMapMarkerDraggable, originalMapClickable);
}
